<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
	<head>
		<title>购彩大厅</title>
		<%@include file="/WEB-INF/base.jspf"%>
		<link rel="stylesheet" href="/css/style.css" />
		
		<style>
			*{font-size: 16px;}
			.gray{font-size: 13px;}
			.name{font-weight: bold;}
			.not1{color: red!important;font-size: 14px!important;margin-top: 5px;}
			* {
			user-select: none; -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;
			}
			.cai1{float: left;padding-top: 70px;}
			.cai1 li{float: left;width: 33.3%;border-top: 1px solid #f0f0f0;padding: 25px 0px;}
			.cai1 img{width: 70px;height: 70px;}
			.cai1 .not,.cai1 .not1,.cai1 .br1,.cai1 .qishu{display: none;}
			
			.cai2{margin-top: 0px;}
			.cai2 li{margin-top: 10px; height: 80px;border-top: 1px solid #f0f0f0;padding-top: 8px;}
			.cai2 img{width: 60px;height: 60px;margin:6px 10px 0px 0px;}
			.cai2 .not{left: 80px;position: absolute;margin-top:10px;}
			.cai2 .djs,.cai2 .qishu{right: 10px;position: absolute;}
			.djs{margin-top: 8px;color: #A7A7A7;font-weight: bold;}
			.cai2 .br{display: none;}
			.cai2 img,.cai2 .name,.cai2{float: left;}
			#cai .cz, .nav1 select, #hhh {
				cursor: pointer;
			}
			.cai2 li:first-child {
				border-top:none;
			}			
			.c-span-lastPeriod {
				font-size:13px!important;
			}
			.zhengzaikaijiang {
				background-color:red;
				margin:1px;
				color:white;
				width:0.46rem;
				height:0.46rem;
				line-height:0.46rem;
				font-size:0.33rem;
				display:inline-block;
				border-radius: 50%;
			}
			[data-cname='bjl'] {
				position: relative;
			}
			[data-cname='bjl'] .qishu, [data-cname='bjl'] .not1, [data-cname='bjl'] .djs {
				visibility: hidden;
			}
			[data-cname='bjl'] .not {
				font-size:12px;
				color:#a7a7a7;
				font-weight:bold;
				left:70px;
				text-align: left;
				bottom:4px;
			}
			.xg6hc .djs {
				display:none;
			}
			.c-span-nextPeriod {
				font-size:13px!important;
			}
			.clearfix:after {
				content:"";
				display:block;
				clear:both;
			}
			.span-c-placeholder {
				color:white;
			}
			.span-c-nextPeriodStatus {
				font-size:13px;
				color:red;
			}
			.span-c-placeholder{display: none;}
			
			.dice{
				width:2.2rem;
				display:flex;
				justify-content: space-between;
			}
			.shaizi{
				display:inline-block ;
				width: 0.56rem;
    			height: 0.56rem;
			}
			
			
	
				
		</style>
	</head>
	<body>
	<div id="loading" class="kd-loading">
	<div class="kd-spinner">
		<span class="bounce b1"></span>
		<span class="bounce b2"></span>
		<span class="bounce b3"></span>
	</div>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>请稍等，努力加载中...</p>
</div>
<div class='wapper' style="display:none">
		<div class="bg-theme col-xs-12 col-sm-4 col-sm-offset-4 text-center top" stlye="padding-left:10px;padding-right:10px;">
			<!-- <a onclick="back()" class="glyphicon glyphicon-chevron-left fl" style="cursor:pointer; color: white;position:absolute;top:50%;transform:translateY(-50%);font-size: 20px;left:10px;"></a> -->
			<span style="font-weight:700;">购彩大厅</span>
			<span id="hhh" class="glyphicon glyphicon-th-large fr" onclick="changImg()" style="position:absolute;top:50%;transform:translateY(-50%);right:10px;font-size: 25px;"></span>
		</div>
		<div class="col-xs-12 col-sm-4 col-sm-offset-4 text-center nav1" style="height: 30px;line-height: 30px;position: fixed;top: 50px;z-index: 50;background:white ;">
			<select style="border: 0;background:white ;outline: none; font-size: 15px;font-weight: bold;color: #059BF3;">
				<option value="cz" selected="selected">全部彩种(点击选择) </option>
				<option value="ssc">时时彩(点击选择) </option>
				<option value="pcdd">PC蛋蛋(点击选择) </option>
				<option value="pk10">PK拾(点击选择) </option>
				<option value="115">11选5(点击选择) </option>
				<option value="kuai3">快3(点击选择) </option>
				<option value="gpc">高频彩(点击选择) </option>
				<option value="dpc">低频彩(点击选择) </option>
				<option value="bjl">百家乐(点击选择)  </option>
			</select>
		</div>
		<div id="cai" class="col-xs-12 col-sm-4 col-sm-offset-4 text-center body cai2" style="padding: 60px 10px;">
			<c:forEach items="${lotterList }" var="l" varStatus="i">
				<c:if test="${l.id!=31}">
					<li data-nogetindex="0" data-cname='${l.cname }' class='${l.classt } cz${i.index+1 } clearfix' href='/lotter/lot.do?zl=${l.cname }'>
						<img src='/img/caizhong/${l.img}.png' /><br class='br'>
						<span class='name'>${l.name}</span><span class='qishu gray' style="color:red;">第<span class="c-span-lastPeriod ${l.cname}lastPeriod" style="color:red;">${l.period }</span>期</span><br class='br1'>
						<span  class='not1 ${l.cname}number' style="float:left;font-size:13px!important;color:red;">${l.lotternumber }</span><br>
						<span class='not gray'>
						<c:if test="${l.cname != 'xg6hc'}">
							<span class="span-period" style="font-size:13px!important;color:#A7A7A7;">距第<span class="c-span-nextPeriod ${l.cname}period" style="font-size:13px;">${l.period+1}</span>期截止还有</span>
						</c:if>
						<c:if test="${l.cname == 'xg6hc'}">
							<span style="font-size:13px!important;color:#A7A7A7;">距第<span  class="c-span-nextPeriod ${l.cname}period" style="font-size:13px;">${l.period+1}</span>期截止还有</span></span>
							<span class="span-c-nextPeriodStatus" id='djs${l.cname}' style="color:#A7A7A7;font-weight:bold;font-size:13px;margin-top: 10px;float: right;"></span>
						</c:if>	
						</span>
						<c:if test="${l.cname != 'xg6hc'}">				
						<span id='djs${l.cname}' class='djs gray' style="right:10px;text-align: left;margin-top :10px;font-size:13px;">00:00:00</span>
						<span hidden="" id="ts${i.index+1 }" >${l.timespace }</span>
						</c:if>
					</li>
				</c:if>
			</c:forEach>
		</div>
		<div class="col-xs-12 col-sm-4 col-sm-offset-4 text-center foot">
			<iframe src="f.jsp"></iframe>
		</div>
		</div>
	</body>
	<script type="text/javascript" src="/js/lotterHelper.js"></script>
	<script>
	 document.onreadystatechange = function(){ 
		　　 if(document.readyState == "complete"){ 　　//当页面加载状态为完全结束时进入 
		    　 //你要做的操作。
			 $(".wapper").show() 
			 $(".kd-loading").hide()
		   　 }
		}

	//var NOT_STOP = ["2fpk10", "2fssc", "xysm", "3fk3"]
	var ISFIRSTLOTTER_flag = true
		!function() {
			countDowns()
			setInterval(countDowns, 7000);
			var falses = false
			function countDowns() {
				ajax({
					url: "/syLotterr.do",
					type: "post",
					data: {},
					success: function(data) {
						var newData = JSON.parse(data)
						for(var i = 0;i<newData.data.length;i++){
							var start = new Date(newData.message)
							 var end = new Date(newData.data[i].nextStopOrderTimeEpoch)
							 var time1 = start.getTime()//当前系统时间
							 var time = end.getTime()//下期时间
							 var countDown  = (time-time1)/1000
							 if(falses){
								 if($("#djs"+newData.data[i].cname).text() == "正在开奖"){
									 timedTask(countDown,newData.data[i].cname,newData.data[i].nextperiod,newData.data[i].period,newData.data[i].lotternumber.replace(/,/g, "         "))
								 }
							 } else{
								 timedTask(countDown,newData.data[i].cname,newData.data[i].nextperiod,newData.data[i].period,newData.data[i].lotternumber.replace(/,/g, "         "))
							 } 
						}
						 if(!falses){
							 falses = true
						 }
					},
					error: function(status) {
						showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "网络繁忙")
					}
				}) 
			}
			 function timedTask(data,name,nextperiod,period,lotternumber){
				 var timer = setInterval(CountDown, 1000);
				 function CountDown() {
					data--
			       	var h = parseInt(data/ 60 / 60 % 60)
			       	var m = parseInt(data/ 60 % 60)
					var s = parseInt(data% 60)
					if(h <= 0 && m <= 0 && s <= 0){
						$("#djs"+name).html("正在开奖<span class='span-c-placeholder'></span>")
						clearInterval(timer)
					}else{
						if(h < 10){
							h = "0"+h
						}
						if(m < 10){
							m = "0"+m
						}
						if(s < 10){
							s = "0"+s
						}
						$("."+name+"number").text(lotternumber)
						$("."+name+"lastPeriod").text(period)
						$("."+name+"period").text(nextperiod)
						$("#djs"+name).html(h+":"+m+":"+s)
					}
		   		 }
			 }
			
			var allLiItems = $("#cai li")
			for (var i = 0; i < allLiItems.length; i++) {
				var item = allLiItems[i]
				if (item.dataset.cname == "bjl") {
					$(item).find(".not").html("在线百家乐，30秒一期，好玩又刺激!<br>最高中奖10万人民币！")
				}
			}
			$("#cai li").click(function(){
				window.location.href=$(this).attr("href");
			});
			stopUserScaleScreenIOS()
		}.call() 
	</script>
</html>
